import React, { Component } from 'react';
import {
  StyleSheet, View, Text, TextInput,
} from 'react-native';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { text: '' };
  }

  // onChangeText 在文本变化时被调用
  render() {
    return (
      <View style={styles.contain}>
        <Text>TextInput 示例</Text>
        <View style={{ padding: 10 }}>
          <TextInput
            style={{ height: 40 }}
            placeholder="Type here to translate!"
            onChangeText={(text) => this.setState({ text })}
          />
          <Text style={{ padding: 10, fontSize: 42 }}>
            {this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
          </Text>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  contain: {
    flex: 1,
  },
});
export default MyComponent;
